<template>
  <div style="width: 70%; margin-top: 5%">
    <el-form
      :model="user"
      :rules="rules"
      ref="userFormRef"
      label-width="100px"
      class="demo-dynamic"
    >
      <!-- 昵称 -->
      <el-form-item
        style="width: 49%"
        label="昵称"
        prop="name"
      >
        <el-input v-model="user.name"></el-input>
      </el-form-item>

      <br>

      <!-- 性别 -->
      <el-form-item label="性别" prop="gender">
        <el-select v-model="user.gender" placeholder="请选择性别">
          <el-option label="男" value="男"></el-option>
          <el-option label="女" value="女"></el-option>
        </el-select>
      </el-form-item>

      <!-- 年龄 -->
      <el-form-item label="年龄" prop="age">
        <el-select v-model="user.age" placeholder="请选择年龄">
          <el-option
            v-for="age in ageOptions"
            :key="age"
            :label="age"
            :value="age"
          />
        </el-select>
      </el-form-item>

      <!-- 邮箱 -->
      <el-form-item
        style="width: 60%"
        prop="email"
        label="邮箱"
      >
        <el-input v-model="user.email"></el-input>
      </el-form-item>

      <!-- 密码 -->
      <el-form-item label="密码" prop="password">
        <el-input
          v-model="user.password"
          type="password"
          placeholder="请输入密码"
          show-password
        />
      </el-form-item>

      <!-- 确认密码 -->
      <el-form-item label="确认密码" prop="confirmPassword">
        <el-input
          v-model="user.confirmPassword"
          type="password"
          placeholder="请再次输入密码"
          show-password
        />
      </el-form-item>

      <!-- 提交按钮 -->
      <el-form-item>
        <el-button type="" @click="logout()">返回登录界面</el-button>
        <el-button type="primary" @click="submitForm('userFormRef')">注册账号</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { ref, reactive,getCurrentInstance} from 'vue';
import { useUserStore } from '../plugins/pinia'; 

export default {
  name: "infoeditor",
  setup() {
    const { proxy } = getCurrentInstance();
    // 创建响应式的年龄选项列表
    const ageOptions = ref(Array.from({ length: 201 }, (_, index) => index));

    // 创建响应式表单对象
    const user = reactive({
      name: '',
      age: 0,
      gender: '',
      email: '',
      password: '',
      confirmPassword: '',
    });
    let user_now = reactive({
      id:0,
      name: '',
      gender: '',
      age: 0,
      permission:'',
      password: '',
      email: ''
    });
    const logout = () => {
  window.location.reload();
};
    // 创建验证规则
    const rules = {
      name: [
        { required: true, message: '请注意昵称长度在3~15个字符', trigger: 'blur' },
        { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' },
      ],
      sex: [
        { required: true, message: '请选择性别', trigger: 'change' },
      ],
      age: [
        { required: true, message: '请选择年龄', trigger: 'change' },
      ],
      email: [
        { required: true, message: '请输入邮箱地址', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] },
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, message: '密码长度不能少于6位', trigger: 'blur' },
      ],
      confirmPassword: [
        { required: true, message: '请确认密码', trigger: 'blur' },
        {
          validator: (rule, value, callback) => {
            if (value !== user.password) {
              callback(new Error('两次输入的密码不一致'));
            } else {
              callback();
            }
          },
          trigger: 'blur',
        },
      ],
    };
    const userStore = useUserStore();
    // 提交表单的方法
    const submitForm = (formName) => {
      const formRef = formName === 'userFormRef' ? userFormRef.value : null;
      if (formRef) {
        formRef.validate((valid) => {
          if (valid) {
            proxy.$axios.post('/user',user).then((response)=>{
            if(response.data.code){
               success_f(response)
               userStore.setUserInfo(response.data.data);
               proxy.$router.push({
                path:'/home',
                query:{}
               })}
            else
               fail_f(response)
        })
          } else {
            console.log('提交失败，请检查输入内容');
            return false;
          }
        });
      }
    };
    const success_f = (response) => {
                      proxy.$message({
                          message:response.data.msg,
                          type: 'success'
                      })
                  };
      const fail_f = (response)=>{
                      proxy.$message({
                          message:response.data.msg,
                          type: 'error'
                      });
                  };
    // 表单引用
    const userFormRef = ref(null);

    return {
      ageOptions,
      user,
      rules,
      submitForm,
      userFormRef,
      logout
    };
  },
};
</script>

<style scoped>
</style>